<script setup>
import NavBar from "@/components/NavBar.vue";
import {reactive} from "vue";
import {infoStore} from "@/stores";
import {Card, showToast} from 'vant';
import {IconFont} from '@nutui/icons-vue';
import '@nutui/icons-vue/dist/style_iconfont.css';
import {useRouter} from "vue-router";

const store = infoStore()
const {orderNum, order, product, address, totalPrice} = store
const state = reactive({
    title: '订单详情',
})
const userRouter = useRouter()
const pay = () => {
    setTimeout(() => {
        showToast('付款成功')
        userRouter.push('/success')
    }, 500)
}

</script>

<template>
    <div class="container">
        <NavBar :title="state.title"/>
        <nut-cell-group title="收货信息">
            <nut-cell>
                <nut-row>
                    <nut-col :span="2">
                        <IconFont name="locationg3" color="#fa2c19"></IconFont>
                    </nut-col>
                    <nut-col :span="10">
                        <div class="flex-content">
                            收货人:{{ address.customerName }}
                        </div>
                    </nut-col>
                    <nut-col :span="10">
                        <div class="flex-content flex-content-light">
                            联系方式：{{ address.phone }}
                        </div>
                    </nut-col>
                </nut-row>
            </nut-cell>
            <nut-cell>
                <nut-row>
                    <nut-col :span="24">
                        <div class="flex-content">收货地址：{{ address.fullAddress }}</div>
                    </nut-col>
                </nut-row>
            </nut-cell>
        </nut-cell-group>
        <nut-cell>
            <Card
                :num="orderNum"
                :price="order.price"
                :title="product.title"
                :thumb="order.imagePath"
            />
        </nut-cell>
        <nut-cell-group>
            <nut-cell>
                <nut-row>
                    <nut-col :span="12">
                        <div class="flex-content">配送方式</div>
                    </nut-col>
                    <nut-col :span="12">
                        <div class="flex-content flex-content-light">京东快递</div>
                    </nut-col>
                </nut-row>
            </nut-cell>
            <nut-cell>
                <nut-row>
                    <nut-col :span="12">
                        <div class="flex-content">商品金额</div>
                    </nut-col>
                    <nut-col :span="12" class="">
                        <span style="color: red;">￥{{ totalPrice }}</span>
                    </nut-col>
                </nut-row>
            </nut-cell>
            <nut-cell>
                <nut-row>
                    <nut-col :span="12">
                        <div class="flex-content">运费</div>
                    </nut-col>
                    <nut-col :span="12">
                        <div class="flex-content flex-content-light">包邮</div>
                    </nut-col>
                </nut-row>
            </nut-cell>
        </nut-cell-group>
        <div class="bottom">
            <span>合计：￥</span><span
            style="color: red; font-weight:800;padding-right:10px">{{ totalPrice }}</span>
            <nut-button type="primary" @click="pay">确认付款</nut-button>
        </div>

    </div>
</template>

<style scoped lang="less">
.container {
    width: 100%;
    height: 100%;
    position: absolute;

    .bottom {
        display: flex;
        position: relative;
        bottom: -280px;
        right: -175px;
        align-items: center;
    }
}
</style>